<template>
<view class="hover_ball_cell" :style="{ width: `${diameter}px`, height: `${diameter}px`, top: `${top}px`, left: `${left}px` }" @touchmove="touchmove" @touchend="touchend" @touchcancel="touchcancel" @tap="onTap" @click="Service" :animation="ballAnimation">
    <view class="wave" />
</view>
</template>

<script>
export default {
    props: ['listPhone'],
    data() {
        return {
            diameter: 0,
            top: 0,
            left: 0,
            isMove: false,
            ballAnimation: {},
            timeout: null,
            modile: {},
            buttonRect: {},
        };
    },
    name: 'hover-ball',
    created() {
        let _this = this;
        uni.getSystemInfo({
            success: function (res) {
                _this.top = res.windowHeight * 0.5;
            }
        });
        _this.modile = uni.getSystemInfoSync();
        // _this.top =res.windowHeight * 0.45;
        _this.left = _this.modile.safeArea.width;
        // _this.left = (_this.modile.safeArea.width-15);
        _this.diameter = _this.modile.screenHeight / 14;
    },
    methods: {
        Service() {
            // 点击后先从底部弹层 
            let that = this;
            uni.showActionSheet({
                title: '联系电话',
                itemList: this.listPhone, // '12345676543',
                popover: {
                    top: that.buttonRect.top * 2 + that.buttonRect.height,
                    left: that.buttonRect.left + that.buttonRect.width / 2
                },
                success: e => {
                    console.log(e, 'e的数据');
                    uni.makePhoneCall({
                        phoneNumber: this.listPhone[e.tapIndex],
                        success: () => {
                            console.log('拨打电话');
                        }
                    });
                }
            });
            // uni.makePhoneCall({
            //     phoneNumber: this.storePhone //仅为示例
            // });
        },
        onTap() {
            let _this = this;
            let x = '0';
            if (2 * _this.left >= _this.modile.safeArea.width) {
                x = '-100%';
            }
            let create = uni.createAnimation({
                duration: 0
            });
            create.translate(x).step();
            _this.ballAnimation = create.export();
            _this.overBall();
        },
        touchmove(e) {
            let _this = this;
            _this.isMove = true;
            if (_this.timeout != null) {
                clearTimeout(_this.timeout);
                _this.timeout = null;
            }
            var touch = e.touches[0] || e.changedTouches[0];
            _this.left = touch.clientX;
            _this.top = touch.clientY;
        },
        touchend(e) {
            let _this = this;
            if (!_this.isMove) {
                return;
            }
            _this.finish(e);
        },
        touchcancel(e) {
            let _this = this;
            if (!_this.isMove) {
                return;
            }
            _this.finish(e);
        },
        finish(e) {
            let _this = this;
            _this.isMove = false;
            var touch = e.touches[0] || e.changedTouches[0];
            _this.left = touch.clientX;
            _this.top = touch.clientY;
            let x = '0';
            if (2 * _this.left + _this.diameter >= _this.modile.safeArea.width) {
                _this.left = _this.modile.safeArea.width;
                x = '-100%';
            } else {
                _this.left = _this.modile.safeArea.left;
            }
            if (_this.top > _this.modile.safeArea.height + _this.modile.safeAreaInsets.bottom) {
                _this.top = _this.modile.safeArea.height + _this.modile.safeAreaInsets.bottom;
            } else if (_this.top < -_this.diameter / 2) {
                _this.top = -_this.diameter / 2;
            }
            let create = uni.createAnimation({
                duration: 0
            });
            create.translate(x).step();
            _this.ballAnimation = create.export();
            _this.overBall();
        },
        overBall() {
            let _this = this;
            _this.timeout = setTimeout(() => {
                _this.timeout = null;
                let create = uni.createAnimation({
                    duration: 400,
                    timingFunction: 'ease-in'
                });
                create.translate('-50%').step();
                _this.ballAnimation = create.export();
            }, 1200);
        }
    }
};
</script>

<style lang="less" scoped>
.hover_ball_cell {
    position: fixed;
    overflow: hidden;
    border-radius: 50%;
    // border: 4upx solid #67c23a;
    // background: #ffffff;
    transform: translate(-50%, 0);
    // padding: 4upx;

    .wave {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../../pagesSub-My/static/images/btn_h_call@2x.png);
        border-radius: 50%;
        background-size: 100% 100%;
    }
}
</style>
